/*******************************************************/
/***************** Flip Effects ************************/
/*******************************************************/

.te-perspective{ 
	-webkit-perspective: 1000; 
}
.te-transition,
.te-cover{
	position: absolute;
	width: 333px;
	height: 430px;
	top: 0px;
	left: 0px;
}
.te-transition,
.te-cover.te-hide,
.te-images{ display: none; }
.te-transition.te-show{ display: block; }
.te-card ,
.te-back,
.te-front{
	width: 100%;
	height: 100%;
	position: absolute;
}
.te-card{ 
	-webkit-transform-style: preserve-3d;
}
.te-front, 
.te-back{ 
	-webkit-backface-visibility: hidden; 
}
.te-back{ 
	-webkit-transform: rotate3d(1,0,0,-180deg);
}
/***************** Flip1 ********************/
.te-flip1.te-show .te-card{
	-webkit-animation: flip1 1s ease-in-out;
}
@-webkit-keyframes flip1{
	0% { 
		-webkit-transform: rotate3d(1,0,0,0);
	}
	100% { 
		-webkit-transform: rotate3d(1,0,0,-180deg); 
	}
}
/****************** Flip2 *******************/
.te-flip2.te-show .te-card{
	-webkit-animation: flip2 1s ease-in-out;
}
@-webkit-keyframes flip2{
	0% { 
		-webkit-transform: rotate3d(1,0,0,0);
	}
	50% {
		-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,430px,0);
	}
	100% { 
		-webkit-transform: rotate3d(1,0,0,-180deg) translate3d(0,0,0);
	}
}
/****************** Flip3 *******************/
.te-flip3 .te-back {
	-webkit-transform: rotate3d(0,1,0,-180deg);
}
.te-flip3.te-show .te-card{
	-webkit-animation: flip3 1s ease-in-out;
}
@-webkit-keyframes flip3{
	0% {
		-webkit-transform: rotate3d(0,1,0,0);
	}
	50% {
		-webkit-transform: rotate3d(0,1,0,-190deg);
	}
	70% {
		-webkit-transform: rotate3d(0,1,0,-172deg);
	}
	80% {
		-webkit-transform: rotate3d(0,1,0,-180deg);
	}
	95% {
		-webkit-transform: rotate3d(0,1,0,-178deg);
	}
	100% { 
		-webkit-transform: rotate3d(0,1,0,-180deg); 
	}
}
/****************** Flip4 *******************/
.te-flip4 .te-back{
	-webkit-transform: rotate3d(0,1,0,-180deg);
}
.te-flip4.te-show .te-card{
	-webkit-animation: flip4 1s ease-in-out;
	-webkit-transform-origin: 100% 50%;
}
@-webkit-keyframes flip4{
	0% { 
		-webkit-transform: rotate3d(0,1,0,0) ;
	}
	100% { 
		-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(333px,0,0); 
	}
}